<#macro preview name selector1 selector2=''>
<div id="${name}Preview" style="display:none;"><div style="position:fixed;bottom:62px;right:5px;z-index:1000;"><img style="max-height:400px;max-width:500px;"/></div></div>
<script>
	var ${name}ImagesSuffix=["png","gif","jpg","jpeg","bmp"];
	var ${name}ResourcePath = '${site.resourcePath}';
	var ${name}box = (!$.pdialog.getCurrent())?navTab.getCurrentPanel(): $.pdialog.getCurrent();
	$('${selector1}',${name}box).on("mouseover mouseout",'${selector2}',function(event){
		if(event.type == "mouseover"){
			var filenames=$(this).val().toLowerCase().split('.');
			if(-1 != $.inArray(filenames[filenames.length-1], ${name}ImagesSuffix)){
				if(-1<$(this).val().indexOf("://")||0==$(this).val().indexOf("//")){
					$('#${name}Preview',${name}box).show().find('img').attr('src',$(this).val());
				}else{
					$('#${name}Preview',${name}box).show().find('img').attr('src',${name}ResourcePath+$(this).val());
				}
			}
		}else if(event.type == "mouseout"){
			$('#${name}Preview',${name}box).hide();
		}
	});
</script>
</#macro>